<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试放大镜</title>
	<link rel="stylesheet" type="text/css" href="../../dist/css/hisui.css">
	<script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="../../dist/js/jquery.hisui.js"></script>
	<script type="text/javascript" src="../../dist/js/locale/hisui-lang-zh_CN.js"></script>
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script src="../jquery-tag-demo.js" type="text/javascript"></script>
	<script src="../mock-min.js" type="text/javascript"></script>
	<script src="./data.js" type="text/javascript"></script>
	<style>
		td{
			padding: 5px 0;
		}
	</style>
</head>
<body>
    <h3>测试放大镜的toolbar属性</h3>
    <div class="demo-exp-code entry-content">
		<div>
			<table>
				<tbody>
					<tr>
						<td class="r-label">安全组</td>
						<td><input id="group" class="textbox" /></td>
					</tr>
				</tbody>
			</table>
		</div>
		<script type='text/javascript'>
			$(function(){
				$("#group").lookup({
					width:200,panelWidth:800,
					url:'getGroup',
					mode:'remote',
					idField:'HIDDEN',
					textField:'Description',
                    toolbar:'#LookuptoolTop',
					columns:[[  
						{field:'Description',title:'安全组名称',width:200},  
						{field:'HIDDEN',title:'安全组ID',width:100} ,
						{field:'Other',title:'其他信息',width:400,formatter:function(val,row){
							return row['Description']+'：分配人数'+Math.floor(Math.random()*500)
						}} 
					]],
					pagination:true,
					onSelect:function(index,rowData){
						console.log("index="+index+",rowData=",rowData);
						//$('#group').lookup('setText',rowData.HIDDEN+"-"+rowData.Description);  //textField虽是Description，在onSelect这可以自己改显示的值 但此种操作需要自己处理好查询条件间的关系
					}
				});
			})
		</script>
    </div>
    <br>
    <h3>测试放大镜的btoolbar属性</h3>
    <div class="demo-exp-code entry-content">
		<div>
			<table>
				<tbody>
					<tr>
						<td class="r-label">安全组</td>
						<td><input id="group2" class="textbox" /></td>
					</tr>
				</tbody>
			</table>
		</div>
		<script type='text/javascript'>
			$(function(){
				$("#group2").lookup({
					width:200,panelWidth:800,
					url:'getGroup',
					mode:'remote',
					idField:'HIDDEN',
					textField:'Description',
                    btoolbar:'#LookuptoolBottom',
					columns:[[  
						{field:'Description',title:'安全组名称',width:200},  
						{field:'HIDDEN',title:'安全组ID',width:100} ,
						{field:'Other',title:'其他信息',width:400,formatter:function(val,row){
							return row['Description']+'：分配人数'+Math.floor(Math.random()*500)
						}} 
					]],
					pagination:true,
					onSelect:function(index,rowData){
						console.log("index="+index+",rowData=",rowData);
						//$('#group').lookup('setText',rowData.HIDDEN+"-"+rowData.Description);  //textField虽是Description，在onSelect这可以自己改显示的值 但此种操作需要自己处理好查询条件间的关系
					}
				});
			})
		</script>
	</div>
    <br>
    <h3>测试下拉表格的toolbar属性</h3>
    <div class="demo-exp-code entry-content">
		<div>
			<table>
				<tbody>
					<tr>
						<td class="r-label">安全组</td>
						<td><input id="group3" class="textbox" /></td>
					</tr>
				</tbody>
			</table>
		</div>
		<script type='text/javascript'>
			$(function(){
				$("#group3").combogrid({
					width:200,panelWidth:800,
					url:'getGroup',
					mode:'remote',
					idField:'HIDDEN',
					textField:'Description',
                	toolbar:'#LookuptoolTop',
					columns:[[  
						{field:'Description',title:'安全组名称',width:200},  
						{field:'HIDDEN',title:'安全组ID',width:100} ,
						{field:'Other',title:'其他信息',width:400,formatter:function(val,row){
							return row['Description']+'：分配人数'+Math.floor(Math.random()*500)
						}} 
					]],
					pagination:true,
					onSelect:function(index,rowData){
						console.log("index="+index+",rowData=",rowData);
						//$('#group').lookup('setText',rowData.HIDDEN+"-"+rowData.Description);  //textField虽是Description，在onSelect这可以自己改显示的值 但此种操作需要自己处理好查询条件间的关系
					}
				});
			})
		</script>
	</div>
    <br>
    <h3>测试下拉表格的btoolbar属性</h3>
    <div class="demo-exp-code entry-content">
		<div>
			<table>
				<tbody>
					<tr>
						<td class="r-label">安全组</td>
						<td><input id="group4" class="textbox" /></td>
					</tr>
				</tbody>
			</table>
		</div>
		<script type='text/javascript'>
			$(function(){
				$("#group4").combogrid({
					width:200,panelWidth:800,
					url:'getGroup',
					mode:'remote',
					idField:'HIDDEN',
					textField:'Description',
                   btoolbar:'#LookuptoolBottom',
					columns:[[  
						{field:'Description',title:'安全组名称',width:200},  
						{field:'HIDDEN',title:'安全组ID',width:100} ,
						{field:'Other',title:'其他信息',width:400,formatter:function(val,row){
							return row['Description']+'：分配人数'+Math.floor(Math.random()*500)
						}} 
					]],
					pagination:true,
					onSelect:function(index,rowData){
						console.log("index="+index+",rowData=",rowData);
						//$('#group').lookup('setText',rowData.HIDDEN+"-"+rowData.Description);  //textField虽是Description，在onSelect这可以自己改显示的值 但此种操作需要自己处理好查询条件间的关系
					}
				});
			})
		</script>
	</div>
    <div id="LookuptoolBottom" class="toolpanel" >
        <div>
            <h3>底部工具栏</h3>
        </div>
    </div>
    <div id="LookuptoolTop" class="toolpanel" >
        <div>
            <h3>顶部工具栏</h3>
        </div>
    </div>

    <br>
    <h3>测试双击单击事件</h3>
	<div class="demo-exp-code entry-content">
		<div>
			<table>
				<tbody>
					<tr>
						<td class="r-label">安全组</td>
						<td><input id="group5" class="textbox" /></td>
					</tr>
				</tbody>
			</table>
		</div>
		<script type='text/javascript'>
			$(function(){
				$("#group5").lookup({
                    width:200,panelWidth:800,
                    height:100,
					url:'getGroup',
					mode:'remote',
					idField:'HIDDEN',
					textField:'Description',
					columns:[[  
						{field:'Description',title:'安全组名称',width:200},  
						{field:'HIDDEN',title:'安全组ID',width:100} ,
						{field:'Other',title:'其他信息',width:400,formatter:function(val,row){
							return row['Description']+'：分配人数'+Math.floor(Math.random()*500)
						}} 
					]],
					pagination:true,
					onSelect:function(index,rowData){
						// console.log("index="+index+",rowData=",rowData);
						//$('#group').lookup('setText',rowData.HIDDEN+"-"+rowData.Description);  //textField虽是Description，在onSelect这可以自己改显示的值 但此种操作需要自己处理好查询条件间的关系
                    },
                    onClickRow:function(index, rowData){
                        console.log("单击了"+rowData.Description+"行!");
                        // $("#group5").lookup("showPanel");
                    },
                    onDblClickRow:function(index, rowData){
                        console.log("双击了"+rowData.Description+"行!");
                        // $("#group5").lookup("hidePanel");
                    }
				});
			})
		</script>
	</div>
    
</body>
</html>